<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="metro4:init:mode" content="immediate">
    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <link rel="icon" href="../../favicon.ico" type="image/x-icon">

    <link href="../../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Table - Metro 4 :: Popular HTML, CSS and JS library</title>

</head>
<body>
<div class="container">
    <h1 class="text-center">Metro 4 Table component</h1>
    <h3 class="text-center">Inspector, export, custom filter</h3>

    <div>
        <input type="checkbox" data-role="checkbox" data-caption="Rownum" onclick="$('#demo-table').attr('data-rownum', $(this).is(':checked'))">
        <input type="checkbox" data-role="checkbox" data-caption="Checks" checked onclick="$('#demo-table').attr('data-check', $(this).is(':checked'))">
    </div>

    <div class="row flex-justify-between flex-nowrap ml-0 mr-0 mt-2">
        <div class="w-100">
            <div id="table-search"></div>
        </div>
        <div class="no-wrap ml-1">
            <div id="table-actions" class="d-flex flex-align-center">
                <div class="dropdown-button">
                    <button class="button"><span class="mif-more-horiz"></span></button>
                    <ul class="d-menu context shadow-3" data-role="dropdown">
                        <li><a href="#" onclick="$('#demo-table').data('table').export('CSV', 'all', 'export-all.csv')"><span class="mif-upload2 fg-cyan icon"></span> Export all</a></li>
                        <li><a href="#" onclick="$('#demo-table').data('table').export('CSV', 'all-filtered', 'export-all-filtered.csv')"><span class="mif-upload2 fg-cyan icon"></span> Export filtered</a></li>
                        <li><a href="#" onclick="$('#demo-table').data('table').export('CSV', 'checked', 'export-checked.csv')"><span class="mif-upload2 fg-steel icon"></span> Export selected</a></li>
                        <li><a href="#" onclick="$('#demo-table').data('table').export('CSV', 'view', 'export-view.csv')"><span class="mif-upload2 fg-brown icon"></span> Export current view</a></li>
                    </ul>
                </div>

                <a onclick="$('#demo-table').data('table').toggleInspector()" class="button ml-1"><span class="mif-cog"></span></a>

                <input type="checkbox" class=""
                       data-role="switch"
                       data-caption="Show inactive users"
                       onclick="$(this).is(':checked') ? tableFuncs.removeArchiveFilter() : tableFuncs.addArchiveFilter()">
            </div>
        </div>
    </div>

    <table id="demo-table"
           class="table table-border striped row-hover mt-4 entities-table" style="min-width: 300px!important;"
           data-role="table"
           data-source="./table-insp.json"
           data-cls-table-top="row"
           data-cls-search="cell-md-8"
           data-cls-rows-count="cell-md-4"
           data-table-search-title="Quick search:"
           data-table-rows-count-title="Show:"
           data-table-info-title="Showed с $1 по $2 из $3"
           data-all-records-title="All records"
           data-rows="10"
           data-rows-steps="-1, 10, 20, 50, 100"
           data-info-wrapper="#table-info"
           data-pagination-wrapper="#pagination"
           data-rows-wrapper="#rows-count"
           data-search-wrapper="#table-search"
           data-inspector-title="Setup view"
           data-on-draw-cell="tableFuncs.onDrawCell"
           data-on-draw-row="tableFuncs.onDrawRow"
           data-view-save-mode="client"
           data-check="true"
           data-check-col-index="0"
           data-check-store-key="MY_STORE_FOR_TABLE:$1"

    ></table>

    <div class="row">
        <div class="cell-md-8">
            <div id="pagination"></div>
            <div id="table-info"></div>
        </div>
        <div class="cell-md-4">
            <div id="rows-count"></div>
        </div>
    </div>

</div>

<script src="../../metro/js/metro.js"></script>
<script>
    var tableFuncs = {
        onDrawCell: function (td, raw_data, index, head) {
            var html = '';
            if (head.name === "is_active") {
                html = parseInt(raw_data) === 1 ? "<span class='fg-green mif-checkmark'></span>" : "<span class='fg-red mif-minus js-archive-record'></span>";
                td.html(html);
            }
            if (head.name === "is_editor") {
                html = parseInt(raw_data) === 1 ? "<span class='fg-green mif-checkmark'></span>" : "<span class='fg-red mif-minus'></span>";
                td.html(html);
            }
            if (head.name === "is_scanner") {
                html = parseInt(raw_data) === 1 ? "<span class='fg-green mif-checkmark'></span>" : "<span class='fg-red mif-minus'></span>";
                td.html(html);
            }
        },

        onDrawRow: function (tr) {
            if (tr.find(".js-archive-record").length > 0) {
                tr.addClass("archive-record bg-lightGray")
            }
        },

        archiveFilterIndex: 0,

        addArchiveFilter: function () {
            var entities_table = $("#demo-table");
            var table;

            if (entities_table.length === 0) {
                return;
            }

            table = entities_table.data("table");
            this.archiveFilterIndex = table.addFilter(function (row, heads) {
                var is_active_index = 0;
                heads.forEach(function (el, i) {
                    if (el.name === "is_active") {
                        is_active_index = i;
                    }
                });
                return parseInt(row[is_active_index]) === 1;
            }, true);
        },

        removeArchiveFilter: function () {
            var entities_table = $("#demo-table");
            var table;

            if (entities_table.length === 0) {
                return;
            }
            table = entities_table.data("table");
            table.removeFilter(this.archiveFilterIndex, true);
        }
    };

    $(function(){
        tableFuncs.addArchiveFilter();
    })

</script>

</body>
</html>